<template>
  <div class="header" :style="headerStyle">
    <div class="header-info">
      <router-link tag="span" to="/" class="iconfont back-icon">
        &#xe697;
      </router-link>
      <div class="avatar-wrapper border">
        <img class="avatar" src="https://fuss10.elemecdn.com/0/f0/71ef3220ff962d16d559767ac5b20jpeg.jpeg">
      </div>
      <div class="support" @click="handleShow">
        <div class="left">
          满30减15， 满60减30
        </div>
        <div class="right">
          6个优惠
          <span class="iconfont jt-icon">&#xe6aa;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoreHeader',
  data () {
    return {
      headerStyle: {
        backgroundImage: "url('https://fuss10.elemecdn.com/2/e0/b1a55d345e68c2601a1ad016d38b9png.png')"
      }
    }
  },
  methods: {
    handleShow () {
      this.$emit('handleSellerInfo')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/common.styl'
  .header
    position relative
    height 0
    padding-bottom 35.7333%
    background-size 100% 100%
    overflow hidden
    &:after
      content ''
      $posFull()
      background inherit
      filter blur(4px)
    .header-info
      z-index 2
      $posFull()
      display flex
      flex-direction column
      align-items center
      justify-content center
      background-color rgba(50,60,80,.4)
      .back-icon
        position absolute
        top .2rem
        left .2rem
        width .6rem
        text-align center
        line-height .6rem
        font-size .6rem
        font-weight 800
        color #ffffff
      .avatar-wrapper
        width 1.4rem
        height 1.4rem
        border-radius .06rem
        overflow hidden
        .avatar
          width 100%
      .support
        width 100%
        padding 0 .1rem
        height .5rem
        position absolute
        bottom 0
        left 0
        display flex
        align-items center
        font-size .23rem
        color #ffffff
        background-color rgba(66, 66, 66, .6)
        .left
          flex 1
          text-align left
          $ellipsis()
        .right
          width 1.4rem
          .jt-icon
            font-size .23rem
</style>
